<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />

</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <input type="button" name="bt" id="button2" value="确认2" />
        </div>
        <div id="todogroup">
            <!-- <div>吃饭</div>
            <div>睡觉</div> -->
        </div>
        <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
            <div style="opacity: 0;">1111111</div>
            <div>222222</div>
            <div style="display: none;">3333333</div>
            <div>44444</div>
        </div>
        <!--span style="color:blue;">asdfaf&nbsp;&nbsp;&nbsp;&nbsp;asdf</-span-->
    </div>
</body>
<script lang="javascript">

    var inCnt = 0;

    function init() {
        console.log("xxx");
        document.getElementById("button2").onclick = handleClick;
        console.log('xxxxxxx');
    }
    function keyup(e) {
        console.log(e);
        if (e.keCode == 13) {
            handleClick();
        }
    }
    function handleClick(e) {

        console.log("handleClick");
        console.log(e);

        var temp = getValue();

        //<div id = "todo0"><input type = "checkbox" name = "todocheck">吃饭<button type = "button" onclick = "deletByIndex(0)">删除</button></div>
        //console.log(temp.value);
        //document.getElementsByClassName("main")[0].style = "background-color: #333333;";
        //document.getElementById("todogroup").innerHTML = "<div>"+temp+"</div>"  
        var div = document.createElement('div');
        //div.innerText = temp;
        //document.getElementById("todogroup").append(div);
        document.getElementById("todogroup").innerHTML += "<div class='item' id = 'todo"
            + inCnt + "'><input type = 'checkbox' name = 'todocheck'><div class='item-value'>"
            + temp + "</div><button class='item-del' type = 'button' onclick = 'deletByIndex("
            + inCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        inCnt++;
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }
    function enter(id) {
        document.getElementById(id).style = 'background-color=#3e3e3e'
    }
    function leave(id) {
        document.getElementById(id).style = 'background-color=#'
    }
    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main {
        /*  background-color: aqua;
        width: 200px;
        height: 200px;
      */
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .row {
        display: flex;
    }

    .item {
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        background-color: #ffffff;
    }

    .item:hover {
        background-color: #dbdbdb;
        transform: scale(1.2);
    }

    .item-value {
        flex-grow: 1;
        color: #000000;
    }

    .item-del {
        color: aliceblue;
        background-color: red;
        border: 0px;
        opacity: 0;
    }

    .item:hover .item-del {
        opacity: 1;
    }

    .input {
        padding: 8px;
        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus {
        box-shadow: 0px 0px 10px #3762d9;
        border: 2px solid #3762d9;
    }
</style>

</html>